<template>
  <div>
    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box>
    <div
      style="width:420px;height:170px;margin-bottom:40px;position: relative;margin-bottom: 40px;z-index:1;"
    >
      <el-amap
        vid="amap"
        class="amap-demo"
        :center="center"
        :events="events"
        :plugin="plugin"
        expand-zoom-range
        :zooms="zooms"
      >
        <el-amap-marker :position="position"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

<script>
import * as _ from 'lodash'
export default {
  data() {
    return {
      markers: [
        /* [121.59996, 31.197646] */
      ],
      searchOption: {
        citylimit: true,
        city: ''
      },
      zooms: [10, 19],
      position: [0, 0],
      center: [0, 0],
      events: {
        init(map) {
          const markers = _.cloneDeep(self.markers)
          if (!markers) return
          markers.forEach((item, index) => {
            // eslint-disable-next-line no-undef
            AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
              item = new SimpleMarker({
                iconLabel: {
                  innerHTML: index,
                  style: {
                    color: '#fff'
                  }
                },
                iconStyle: '#1995f5',
                map: map,
                position: item.position
              })
            })
          })
        },
        click: e => {
          if (e.lnglat) {
            this.center = [e.lnglat.lng, e.lnglat.lat]
            this.position = [e.lnglat.lng, e.lnglat.lat]
            this.$emit('update:lng', e.lnglat.lng)
            this.$emit('update:lat', e.lnglat.lat)
          }
        }
      },
      lng: 0,
      lat: 0,
      plugin: [
        {
          pName: 'Geolocation',
          events: {
            init: o => {
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.lng = result.position.lng
                  self.lat = result.position.lat
                  self.center = [self.lng, self.lat]
                  this.position = [self.lng, self.lat]
                  if (self.$nextTick) self.$nextTick()
                  this.$emit('update:lng', self.lng)
                  this.$emit('update:lat', self.lat)
                }
              })
            }
          },
          buttonPosition: 'LT'
        }
      ]
    }
  },
  mounted() {},
  methods: {
    onSearchResult(pois) {
      if (pois.length > 0) {
        this.center = [pois[0].lng, pois[0].lat]
        this.position = [pois[0].lng, pois[0].lat]
        this.$emit('update:lng', pois[0].lng)
        this.$emit('update:lat', pois[0].lat)
        this.zooms = [15, 19]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-vue-search-box-container {
  width: 420px;
  height: 35px;
  border: 1px solid #d9d9d9;
  margin-bottom: 20px;
  box-shadow: none;
}
/deep/ .amap-marker-content div {
  height: 40px !important;
}
</style>
